<template>
	<view class="wrap" :key="key">
		<view class="order_detail">
			<view class="top">
				<view class="address_detail">
						{{this.order.consignee_address}} 
				</view>
				<view class="footer_btn" style="display: flex; float: right; margin-bottom: 10px;"> 
					<u-button customStyle="width: 70px; height: 30px; margin: 0 10px 0 0;" size="mini" type="info" @click="openPage('/pages/goods/kefu')"> 联系客服</u-button>
					<u-button customStyle="width: 70px; height: 30px; margin: 0 10px 0 0;" size="mini" type="primary" @click="payment" v-show="statusName[this.order.status]=='待付款'">立即付款</u-button>
					<u-button customStyle="width: 70px; height: 30px; margin: 0 10px 0 0;" size="mini" type="success" @click="confirmReceive" v-show="statusName[this.order.status]=='已发货'">确认收货</u-button>
					<u-button customStyle="width: 70px; height: 30px; margin: 0 10px 0 0;" size="mini" type="success" @click="openPage('pages/order/list')" v-show="statusName[this.order.status]=='待发货'">查看订单</u-button>
				</view>
			</view>
			<view class="content" style="margin-top: 50px;">
				<view class="title">
					{{'订单编号: ' + this.order.order_sn}}
				</view>
				<view class="list">
					<view class="item" v-for="(item,index) in this.order.items" :key="index">
						<u-row gutter="16">

							<u-col :span="3">
								<u-image width="100%" height="150rpx" :src="imgUrl+item.goods.pic"></u-image>
							</u-col>
							<u-col :span="9" @click="toGoods(item.goods.id)">
								<view class="gl-name">{{item.goods.name}}</view>
								<view class="gl-descript">{{item.goods.descript}}</view>
								<view class="gl-price">
									<u-row>
										<u-col offset="6" :span="3" text-align="right">
											￥{{formatPrice(item.price)}}
										</u-col>
										<u-col :span="3" text-align="right">
											x{{item.count}}
										</u-col>
									</u-row>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
				<!-- <view class="total" style="color:red;">优惠: {{formatPrice(order.realPrice)}}</view> -->
				<view class="total">
					<view  v-if="Number.isNaN(parseInt(this.order.couponPrice))" style="color: red;"> 优惠{{this.order.couponDiscount}}折</view>
					<view  v-else style="color: red;">优惠{{this.order.couponPrice}}元</view>
				</view> 
				<view class="total">合计: {{formatPrice(this.order.real_price)}}</view>

			</view>
			<view>
				<u-cell-group title="订单信息">
					<u-cell-item title="订单编号" :value="this.orderSn" :arrow="false"></u-cell-item>
					<u-cell-item title="创建时间" :value="format(this.order.create_time)" :arrow="false"></u-cell-item>
				</u-cell-group>
			</view>

		</view>
	</view>
</template>

<script>
	const db = uniCloud.database()
	const dbCmd = db.command
	const dbOrder = db.collection("t_shop_order")
	const dbOrderItem = db.collection("t_shop_order_item")
	const dbGoods = db.collection("t_shop_goods")
	const dbCoupon = db.collection("t_shop_coupon")
	
	export default {
		data() {
			return {
				imgUrl: 'https://zhy-demo.oss-cn-hangzhou.aliyuncs.com/upload/',
				key: true,
				orderSn:'',
				order:[],
				flag1:'',
				flag2:'',
				statusName: ['待付款', '待发货', '已发货', '已完成', '已取消', '退款中', '已退款', '已评价']
			}
		},
		onLoad(option) {
			this.orderSn = option.orderSn
			this.getData()
		},
		methods: {
			getData() {
				dbOrder.where({order_sn: this.orderSn}).get().then(res => {
					let order = res.result.data[0]
					dbOrderItem.where({id_order: dbCmd.eq(order._id)}).get().then(res => {
						let items = res.result.data
						for (let i = 0; i < items.length; i++) {
							dbGoods.where({_id: dbCmd.eq(items[i].id_goods)}).get().then(res => {
								let goods = res.result.data[0]
								items[i].goods = goods
								order.items = items
								this.order = order
								dbCoupon.where({_id: order.coupon_id}).get().then(res => {
									let coupon = res.result.data[0]
									console.log(coupon)
									this.order.couponPrice = coupon.coupon_price
									this.order.couponDiscount = coupon.coupon_discount
									this.key = !this.key
								})
							});
						}
					});
				});
			},
			openPage(url) {
				this.$u.route({
					url: url
				})
			},
			formatPrice(price) {
				return (price / 100).toFixed(2);
			},
			toGoods(id) {
				this.$router.push({
					path: '/goods/' + id
				})
			},
			payment() {
				this.$u.route({
					url: '/pages/order/payment/payment',
					params: {
						orderSn: this.order.orderSn,
						totalPrice: this.order.totalPrice
					}
				})
				 
			},
			confirmReceive(){
				this.$u.post('user/order/confirm/' + this.orderSn).then(res => {
					this.order = res.order 
				})
			},
			contact(){
				console.log(123)
				this.$u.route({
					url: 'https://res.weiunity.com/kefu/dev/app/kefu.html?id=cdcd04dc418b473a8e1db15e38cb2ba0',
				})
			},
			format(timestamp) {
			 let date = new Date(timestamp);
			 let Y = date.getFullYear() + '-';
			 let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
			 let D = date.getDate() + ' ';
			 let h = date.getHours() + ':';
			 let m = date.getMinutes() + ':';
			 let s = date.getSeconds();
			 return Y + M + D + h + m + s
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order_detail {
		margin: 30rpx;

		.top {
			.address_detail {
				padding: 5px;
			}

			.footer_btn {
				text-align: right;

				.u-btn {
					margin-left: 20rpx;
				}
			}
		}

		.content {
			margin-top: 40rpx;

			.total {
				text-align: right;
				padding: 10px;
			}

			.list {
				.item {
					margin-top: 20rpx;

					.gl-name {
						font-size: 26rpx;
					}

					.gl-descript {
						margin-top: 14rpx;
						font-size: 20rpx;
					}

					.gl-price {
						margin-top: 26rpx;
						font-size: 24rpx; 
					}
				}
			}
			.total{
				
			}
		}



	}
</style>
